import React, { Component } from 'react'

export default class TodoHeader extends Component {
  state = {
    name: '',
  }
  render() {
    const { name } = this.state
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          placeholder="What needs to be done?"
          autoFocus
          value={name}
          onChange={(e) => {
            this.setState({ name: e.target.value })
          }}
          onKeyUp={this.AddTodo}
        />
      </header>
    )
  }
  //点击enter添加Todo
  AddTodo = (e) => {
    // console.dir(e)
    if (e.keyCode !== 13) return
    if (!e.target.value.trim()) {
      return alert('内容不能为空')
    }
    // console.log(this.state.name)
    this.props.AddTodo(this.state.name)
    this.setState({ name: '' })
  }
}
